<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .btn_total {
            margin: 0 auto;
        }

        #proj {
            width: 1200px;
            min-height: 500px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            flex-wrap: wrap;

            align-items: center;
        }

        dl {
            width: 200px;
            height: 360px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            box-sizing: border-box;
            padding-bottom: 40px;
        }

        a {
            display: block;
            width: 80px;
            height: 180px;
        }

        img {
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="btn_total">
        <button id="btn1">价格升序</button>
        <button id="btn2">销量升序</button>
        <button id="btn3">评价升序</button>
        <!-- <img src="" alt=""> -->
    </div>
    <main id="proj">

    </main>
</body>
<script>
    var data = [
        {
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            // 评价
            evaluate: 288,
            // 销量
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }];
    var btn1 = document.getElementById("btn1")
    var btn2 = document.getElementById("btn2")
    var btn3 = document.getElementById("btn3")
    var proj = document.getElementById('proj')
    var btns = document.getElementsByTagName("button")
    // 价格var bt_v = btn1.innerHTML

    /**
     *  str 表示需要排序的字段名字
     *  bool 表是升序还是降序
     *
     * */
    function sort(str, bool) {
        data.sort(function (a, b) {
            return bool ? b[str] - a[str] : a[str] - b[str];
        });
        render();
    };
    var btnsToogle = false;
    btn1.onclick = function () {
        btnsToogle = !btnsToogle;
        this.innerHTML = btnsToogle ? "价格降序" : "价格升序";
        sort("price", btnsToogle);
    }
    var btnsToogle2 = false;
    btn2.onclick = function () {
        btnsToogle2 = !btnsToogle2;
        this.innerHTML = btnsToogle2 ? "销量降序" : "销量升序"
        sort("evaluate", btnsToogle2);
    }
    var btnsToogle3 = false;
    btn3.onclick = function () {
        btnsToogle3 = !btnsToogle3;
        this.innerHTML = btnsToogle3 ? "评价降序" : "评价升序"
        sort("sales", btnsToogle3);
    }
    function render() {
        var html = ""
        for (var i = 0; i < data.length; i++) {
            html += `
                <div href="#">
                <dl>
                    <a href="#"> <img src="${data[i].imgurl}"></a>
                    <dd>颜色：${data[i].color}</dd>
                    <dd>${data[i].name}</dd>
                    <dd>原价：${data[i].price}</dd>
                    <dd>现价：${data[i].sale}</dd>
                    <dd>评价：${data[i].evaluate}</dd>
                    <dd>销量：${data[i].sales}</dd>
                </dl>
            </div>`
        }
        proj.innerHTML = html;
    }
    render();

    // for (var i = 0; i < btns.length; i++) {

    //     btns[i].onclick = function () {
    //         proj.innerHTML = ""
    //         if (this.id == "btn1") {
    //             if (this.innerHTML == "价格升序") {
    //                 this.innerHTML = "价格降序"
    //                 data.sort(function (a, b) {
    //                     return a.price - b.price
    //                 })
    //             } else {
    //                 this.innerHTML = "价格升序"
    //                 data.sort(function (a, b) {
    //                     return b.price - a.price
    //                 })
    //             }
    //         } else if (this.id == "btn2") {
    //             if (bt_v2 == "销量升序") {
    //                 this.innerHTML = "销量降序"
    //                 data.sort(function (a, b) {
    //                     return a.evaluate - b.evaluate
    //                 })
    //             } else {
    //                 this.innerHTML = "销量升序"
    //                 data.sort(function (a, b) {
    //                     return b.evaluate - a.evaluate
    //                 })
    //             }
    //         } else if (this.id == "btn3") {
    //             if (this.innerHTML == "评价升序") {
    //                 this.innerHTML = "评价降序"
    //                 data.sort(function (a, b) {
    //                     return a.sales - b.sales
    //                 })
    //             } else {
    //                 this.innerHTML = "评价升序"
    //                 data.sort(function (a, b) {
    //                     return b.sales - a.sales
    //                 })
    //             }
    //         }
    //         fun()
    //     }
    //     function fn() {
    //         if (this.id == "btn1") {
    //             return
    //         }
    //     }
    //     btns[i].onclick = fn()

    // }

    // var flag = 1
    // function fun() {
    //     for (var i = 0; i < data.length; i++) {
    //         if (flag == 1) {
    //             proj.innerHTML += `
    //         <div href="#">
    //         <dl>
    //             <a href="#"> <img src="${data[i].imgurl}"></a>
    //             <dd>颜色：${data[i].color}</dd>
    //             <dd>${data[i].name}</dd>
    //             <dd>原价：${data[i].price}</dd>
    //             <dd>现价：${data[i].sale}</dd>
    //             <dd>评价：${data[i].evaluate}</dd>
    //             <dd>销量：${data[i].sales}</dd>
    //         </dl>
    //     </div>`
    //         }
    //     }
    // }
    // fun()
    function render() {
        var html = ""
        for (var i = 0; i < data.length; i++) {
            html += `
                <div href="#">
                <dl>
                    <a href="#"> <img src="${data[i].imgurl}"></a>
                    <dd>颜色：${data[i].color}</dd>
                    <dd>${data[i].name}</dd>
                    <dd>原价：${data[i].price}</dd>
                    <dd>现价：${data[i].sale}</dd>
                    <dd>评价：${data[i].evaluate}</dd>
                    <dd>销量：${data[i].sales}</dd>
                </dl>
            </div>`
        }
        proj.innerHTML = html;
    }
    render();

</script>

</html>